<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lottie</title>
    <style>
      body {
        margin: 0;
      }
      #wrap {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        z-index: 1;
      }
      #canvas {
        position: relative;
        z-index: 2;
      }
    </style>
  </head>

  <body>
    <div id="wrap"></div>
    <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas>
    <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <script src="/dist/cdn/EVA.js"></script>
    <script src="/dist/cdn/EVA.rendererAdapter.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.lottie.js"></script>
    <script>
      const {Game, GameObject, resource, RESOURCE_TYPE} = EVA;
      const {RendererSystem} = EVA.plugin.renderer;
      const {Lottie, LottieSystem} = EVA.plugin.renderer.lottie;
      const $wrap = document.getElementById('wrap');

      $wrap.addEventListener('click', e => {
        console.log('wrap clicked !');
      });

      resource.addResource([
        {
          name: 'Halo',
          // @ts-ignore
          type: 'LOTTIE',
          src: {
            json: {
              type: 'json',
              url: 'https://gw.alipayobjects.com/os/bmw-prod/61d9cc77-12de-47a7-b6e5-06c836ce7083.json',
            },
          },
        },
        {
          name: 'Red',
          // @ts-ignore
          type: 'LOTTIE',
          src: {
            json: {
              type: 'json',
              url: 'https://gw.alipayobjects.com/os/bmw-prod/e327ad5b-80d6-4d3f-8ffc-a7dd15350648.json',
            },
          },
        },
      ]);

      const game = new Game({
        systems: [
          new RendererSystem({
            canvas: document.querySelector('#canvas'),
            width: 750,
            height: 1624,
            transparent: true,
          }),
          new LottieSystem(),
        ],
        autoStart: true,
        frameRate: 60,
      });

      game.scene.transform.size = {
        width: 750,
        height: 1624,
      };

      const halo = new Lottie({resource: 'Halo'});
      const red = new Lottie({resource: 'Red'});

      halo.on('complete', () => {
        console.log('halo play complete !');
      });
      red.on('complete', () => {
        console.log('Red play complete !');
      });
      halo.play([], {repeats: 0});
      red.play([], {
        repeats: 0,
        slot: [
          {
            name: '#number',
            type: 'TEXT',
            value: '10',
            style: {
              fontSize: 64,
            },
          },
          {
            name: '#unit',
            type: 'TEXT',
            value: '元',
            style: {
              fontSize: 22,
            },
          },
          {
            name: '#title',
            type: 'TEXT',
            value: '我是主标题',
            style: {
              fontSize: 32,
            },
          },
          {
            name: '#subtitle',
            type: 'TEXT',
            value: '我是副标题',
            style: {
              fontSize: 24,
            },
          },
        ],
      });

      red.onTap('#btn', () => {
        console.log('btn click !');
      });

      const haloGameObj = new GameObject('Halo', {
        anchor: {
          x: 0,
          y: 0,
        },
      });
      const redGameObj = new GameObject('Red', {
        anchor: {x: 0.5, y: 0.3},
        size: {width: 660, height: 757},
        origin: {x: 0.5, y: 0.5},
      });

      haloGameObj.addComponent(halo);
      redGameObj.addComponent(red);

      game.scene.addChild(haloGameObj);
      game.scene.addChild(redGameObj);
    </script>
  </body>
</html>
